<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <link rel="stylesheet" href="style.css" />
  <title>随机密码生成器</title>
</head>

<body>
  <div class="container">
    <h2>随机密码生成器</h2>
    <div class="content">
      <div class="setting-panel">
        <div class="name">英文字母：</div>
        <div class="settings">
          <div class="setting">
            <label>
              <input type="checkbox" id="uppercase" checked>
              大写字母
            </label>
          </div>
          <div class="setting">
            <label>
              <input type="checkbox" id="lowercase" checked>
              小写字母
            </label>
          </div>
        </div>
      </div>
      <div class="setting-box">
        <div class="setting">
          <input type="checkbox" id="numbers" checked> 
          <label for="numbers">数字</label>
        </div>
        <div class="setting">
          <input type="checkbox" id="symbols" >
          <label for="symbols">特殊字符</label>
        </div>
      </div>
      <div class="setting">
        <label>密码位数</label>
        <!-- <input type="number" id="length" min="4" max="32" maxlength="32" value="32"> -->
      
        <div class="box">
          <select class="selectbox" id="length">
        
          </select>
        </div>
      </div>
      <button class="btn btn-large" id="generate">
        随机生成密码
      </button>

      <div class="result-container">
        <span id="result"></span>
        <button class="btn" id="clipboard">
          复制
        </button>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
  <script>
    const passwordsLength = [
    { value: "4", label: "4" },
    { value: "5", label: "5" },
    { value: "6", label: "6" },
    { value: "7", label: "7" },
    { value: "8", label: "8" },
    { value: "9", label: "9" },
    { value: "10", label: "10" },
    { value: "11", label: "11" },
    { value: "12", label: "12" },
    { value: "13", label: "13" },
    { value: "14", label: "14" },
    { value: "15", label: "15" },
    { value: "16", label: "16" },
    { value: "17", label: "17" },
    { value: "18", label: "18" },
    { value: "19", label: "19" },
    { value: "20", label: "20" },
    { value: "21", label: "21" },
    { value: "22", label: "22" },
    { value: "23", label: "23" },
    { value: "24", label: "24" },
    { value: "25", label: "25" },
    { value: "26", label: "26" },
    { value: "27", label: "27" },
    { value: "28", label: "28" },
    { value: "29", label: "29" },
    { value: "30", label: "30" },
    { value: "31", label: "31" },
    { value: "32", label: "32" },
    ] 
    let optionsArray = [];
   
    passwordsLength.forEach(item => {
      optionsArray += `<option value="${item.value}">${item.label}位</option>`
    })
    let ele = document.querySelector('.selectbox')
    ele.innerHTML = optionsArray
  </script>
</body>

</html>